<script setup>
  import sheep from '@/sheep';
  import { computed } from 'vue';

  const props = defineProps({
    avatarStyle: {
      type: Object,
      default: () => {
      },
    },
    src: {
      type: String,
      default: '',
    },
    imageStyle: {
      type: Object,
      default: () => {
      },
    },
    imageMode: {
      type: String,
      default: 'widthFix',
    },
    showBorder: {
      type: Boolean,
      default: false,
    },
  });

  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
</script>

<template>
  <view class="flex items-center justify-center position-relative" :style="avatarStyle">
    <image class="w-100 h-100 identification" :src="`${nc_image_path}/nc_follower_identification.png`"
           v-if="showBorder"></image>
    <view class="w-100 h-100" style="overflow: hidden;border-radius: 50%;">
      <image :src="src" :style="imageStyle" :mode="imageMode"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .identification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
</style>